<template>
  <!-- 故障看板 -->
  <div class="storageChargingScreen">
    <template v-if="renderDashboardComponents">
      <div class="contentBox">
        <div class="contentLeft">
          <!-- 故障类别分析 -->
          <FailureAnalysis :pageType="pageType" />
        </div>
        <div class="contentRight">
          <!-- 故障归因分析 -->
          <FailureAttribution :pageType="pageType" />
        </div>
      </div>
      <div class="contentBox">
        <div class="contentCenter">
          <!-- 异常趋势分析 - 月报 -->
          <AbnormalTrendMonthly :pageType="pageType" />
        </div>
      </div>
      <div class="contentBox">
        <div class="contentCenter">
          <!-- 异常趋势分析 - 年报 -->
          <AbnormalTrend :pageType="pageType" />
        </div>
      </div>
    </template>
  </div>
</template>
<script setup>

import FailureAnalysis from "./FailureAnalysis/index.vue";
import AbnormalTrend from "./AbnormalTrend/index.vue";
import AbnormalTrendMonthly from "./AbnormalTrendMonthly/index.vue";
import FailureAttribution from "./FailureAttribution/index.vue";

const route = useRoute();
const $api = inject("$api");
const renderDashboardComponents = ref(false);

// 根据路由路径判断页面类型
const pageType = computed(() => {
  if (route.path.includes('Unplanned')) {
    return 'Unplanned';
  } else if (route.path.includes('Planned')) {
    return 'Planned';
  }
  return 'Unplanned';
});

watch(
  () => route.path,
  (newPath, oldPath) => {
    const url = [
      "/DigitalAnalysis/Unplanned/UnplannedDashboard",
      "/DigitalAnalysis/Planned/PlannedDashboard",
    ];
    if (url.includes(newPath)) {
      console.log("进入页面");
      renderDashboardComponents.value = false;
      nextTick(() => {
        renderDashboardComponents.value = true;
      });
    } else if (url.includes(oldPath)) {
      console.log("离开页面");
      renderDashboardComponents.value = false;
    }
  },
  { immediate: true }
);
onMounted(async () => {});
</script>
<style scoped lang="less">
.storageChargingScreen {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.contentBox {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  .contentLeft {
    border-radius: 4px;
    flex-shrink: 0;
  }

  .contentRight {
    border-radius: 4px;
    flex: 1;
  }

  .contentCenter {
    width: 100%;
    flex: 1;
  }
}
</style>
